<template>
  <div>
    <a-form-model ref="ha_logForm"
                  :rules="rules"
                  :model="ha_log">
      <a-form-model-item :label-col="labelCol"
                         :wrapper-col="wrapperCol"
                         label="远程访问ip"
                         prop="ip"
                         has-feedback>
        <a-input v-if="!isView"
                 allow-clear
                 v-model="ha_log.ip"
                 :maxLength="100"
                 placeholder="请输入远程访问ip" />
        <span v-text="ha_log.ip"
              v-else></span>
      </a-form-model-item>
      <a-form-model-item :label-col="labelCol"
                         :wrapper-col="wrapperCol"
                         label="用户名"
                         prop="username"
                         has-feedback>
        <a-input v-if="!isView"
                 allow-clear
                 v-model="ha_log.username"
                 :maxLength="100"
                 placeholder="请输入用户名" />
        <span v-text="ha_log.username"
              v-else></span>
      </a-form-model-item>
      <a-form-model-item :label-col="labelCol"
                         :wrapper-col="wrapperCol"
                         label="姓名"
                         prop="fullname"
                         has-feedback>
        <a-input v-if="!isView"
                 allow-clear
                 v-model="ha_log.fullname"
                 :maxLength="100"
                 placeholder="请输入姓名" />
        <span v-text="ha_log.fullname"
              v-else></span>
      </a-form-model-item>
      <a-form-model-item :label-col="labelCol"
                         :wrapper-col="wrapperCol"
                         label="功能"
                         prop="action"
                         has-feedback>
        <a-input v-if="!isView"
                 allow-clear
                 v-model="ha_log.action"
                 :maxLength="100"
                 placeholder="" />
        <span v-text="ha_log.action"
              v-else></span>
      </a-form-model-item>
      <a-form-model-item :label-col="labelCol"
                         :wrapper-col="wrapperCol"
                         label="请求内容"
                         prop="content"
                         has-feedback>
        <a-input v-if="!isView"
                 allow-clear
                 v-model="ha_log.content"
                 :maxLength="1000"
                 placeholder="请输入请求内容" />
        <span v-text="ha_log.content"
              v-else></span>
      </a-form-model-item>
      <a-form-model-item :label-col="labelCol"
                         :wrapper-col="wrapperCol"
                         label="请求时间"
                         prop="reqTime"
                         has-feedback>
        <a-date-picker v-if="!isView"
                       valueFormat="YYYY-MM-DD HH:mm:ss"
                       v-model="ha_log.reqtime"
                       showTime
                       placeholder="请选择请求时间"
                       style="width: 100%" />
        <span v-text="ha_log.reqtime"
              v-else></span>
      </a-form-model-item>
      <a-form-model-item>
        <div style="text-align: center;">
          <a-input type="hidden"
                   :disabled="true"
                   v-model="ha_log.id" />
          <a-button :style="{ marginRight: '8px' }"
                    icon="close"
                    @click="onClose">
            关闭
          </a-button>
          <a-button :style="{ marginRight: '8px'}"
                    icon="reload"
                    @click="resetForm"
                    v-if="!isView">
            重置
          </a-button>
          <a-button type="primary"
                    @click="onSubmit"
                    icon="save"
                    :loading="loading"
                    v-if="!isView">
            保存
          </a-button>
        </div>
      </a-form-model-item>
    </a-form-model>
  </div>
</template>
<script>
/* eslint-disable */
import { saveHa_log, viewHa_log } from '@/api/base/ha_log'
// 没用到枚举请删除
import { queryEnumerationValuesByName } from '@/api/base/enumeration'
// 没用到附件请删除
import { minioUpload } from '@/api/base/file'
// 没用到附件请删除
function getBase64 (file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = () => resolve(reader.result);
    reader.onerror = error => reject(error);
  });
}
export default {
  data () {
    return {
      labelCol: { span: 6 }, // label宽
      wrapperCol: { span: 18 }, // 组件宽
      // 没用到附件请删除
      defaultFileList: [
        {
          uid: '1',
          name: 'xxx.png',
          status: 'done',
          response: 'Server Error 500', // custom error message to show
          url: 'http://192.168.2.118:9000/power/2020-08-25/202008250150270b643a1fefd54845b4cd5e6ec9ea47f3.jpg',
        },
      ],
      previewVisible: false,// 展示上传按钮,没有用到附件请删除
      previewImage: '',// 预览图片,没有用到附件请删除
      // 没有用到附件请删除
      imgList: [
        {
          uid: '-1',
          name: '猫猫.jpg',
          status: 'done',
          url: 'http://192.168.2.118:9000/power/2020-08-25/202008250150270b643a1fefd54845b4cd5e6ec9ea47f3.jpg',
        }
      ],
      loading: false, //按钮显示
      isView: false, //是否查看
      ha_log: {
        id: '',
        ip: '',
        userName: '',
        fullName: '',
        content: '',
        reqTime: '',
      }, //日志信息
      rules: {
      },
    }
  },
  created () {
    // 没有用到枚举请删除
    this.findEnumByName();
  },
  methods: {
    /**
      *  查询枚举值,没有用到枚举请删除
     */
    findEnumByName () {
      const parameter = [
      ]
      parameter.forEach(item => {
        queryEnumerationValuesByName({ 'enName': item.enumName }).then(res => {
          console.log('query' + item.enumName, res.data)
          this[`${item.enname}List`] = res.data
          //this[`${item.enname}List`].unshift({ id: '', description: '全部' })
        })
      })
    },
    /**
     * 调用父组件的方法收起抽屉
     */
    onClose () {
      this.$emit('close')
    },
    /**
     * 提供给父组件调用
     * 点击新增进入时重置表单数据
     */
    resetHa_log () {
      this.isView = false
      this.resetForm()
    },
    /**
     * 提供给父组件调用
     * 查询用户信息
     */
    findHa_logById (id, isView) {
      this.isView = isView
      this.resetForm()

      viewHa_log(id).then(res => {
        this.ha_log = res.data
        /**
       *  枚举如果不能显示中文打开下面的代码
          */
      })
    },
    /**
     * 重置表单
     */
    resetForm () {
      this.$refs.ha_logForm.resetFields();
    },
    /**
     * 提交表单
     */
    onSubmit () {
      this.$refs.ha_logForm.validate(valid => {
        this.loading = true
        if (valid) {
          delete this.ha_log.primaryKey
          console.log('submit!', this.ha_log)
          const savem = this.$message.loading('数据正在保存中...', 0)
          saveHa_log(this.ha_log).then(res => {
            if (res.code !== 0) {
              setTimeout(savem, 0)
              this.$message.error('日志保存失败')
              this.loading = false
            } else {
              setTimeout(savem, 0)
              this.$message.success('保存成功')
              this.$emit('reloadList')
              this.$emit('close')
              this.loading = false
            }
          })
        } else {
          this.loading = false
          // 加延时器的目的是为了vue实例更新未完成，我们可能获取DOM失败的问题
          // 利用原生js的方式，获取所有失败的类名，获得一个数组，取第一个元素获取焦点
          setTimeout(() => {
            const isError = document.getElementsByClassName("has-error");
            const input = isError[0].querySelector('input');
            //console.log(input)
            if (input !== null && input !== 'undefind' && input !== '') {
              isError[0].querySelector('input').focus() ? isError[0].querySelector('input').focus() : isError[0].querySelector('input').click()
            } else {
              isError[0].querySelector('textarea').focus()
            }
          }, 10)
          return false;
        }
      });
    },
    /**
     * 取消预览,没有用到附件请删除
     */
    handleImgCancel () {
      this.previewVisible = false;
    },
    /**
     * 预览图片,没有用到附件请删除
     */
    async handleImgPreview (file) {
      if (!file.url && !file.preview) {
        file.preview = await getBase64(file.originFileObj);
      }
      this.previewImage = file.url || file.preview;
      this.previewVisible = true;
    },
    /**
     * 图片改变,没有用到附件请删除
     */
    imgChange ({ fileList }) {
      this.imgList = fileList;
    },
    /**
     * 附件改变,没有用到附件请删除
     */
    fileChange ({ file, fileList }) {
      if (file.status !== 'uploading') {
        console.log(file, fileList);
      }
    },
    /**
     * 自定义上传方法,没有用到附件请删除
     */
    customRequest (data) {
      const parameter = new FormData()
      parameter.append('file', data.file)
      this.uploadFile(parameter, data)
    },
    /**
     * 上传附件,没有用到附件请删除
     */
    uploadFile (parameter, data) {
      console.log(parameter, data)
      minioUpload(parameter).then(res => {
        console.log('res', res)
        if (res.code !== 0) {
          data.onError()
          this.$message.error(res.msg)
        } else {
          data.onSuccess()
        }
      })
    }
  }
}
</script>
<style lang="less" src="@/style/base.less">
</style>